<template>
	<view class="pageBox">
		<Header :title="'我的礼品卡'"></Header>
		<view class="main">
			<view class="bgBox">
				<image class="bgPic" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/438120e63cfea2b20368aa41bbacdb4.png.png" mode="aspectFill"></image>
				<view class="title">
					冒丰农业礼品卡
				</view>
			</view>
			<view class="tabBox">
				<u-tabs class="tabs" lineHeight="6rpx" :list="tabList" @change="changeTabs" :scrollable="false"
					lineColor="#00A0E9" itemStyle="height:88rpx;" :current="current" :activeStyle="{
				    color: '#019FE8'}" :inactiveStyle="{
				    color: '#000000'}"></u-tabs>
			</view>
			<view class="content">
				<swiper class="swiper" :style="{height : `calc(100vh - ${navBarHeight})`}" :current="current" @change="currentChange" :circular="false" :duration="300">
					<swiper-item class="swiperItem" v-for="(item,i) in 2"  >
						<view class="list" v-if="cardList.length>0">
							<view class="cardItem" :class="{'loseEfficacy':current==1}" v-for="item in cardList" @click="goDetails(item)">
								<image class="cardBg" :src="item.front" mode="aspectFill"></image>
								<image class="logo" src="@/static/logo.png" mode="widthFix"></image>
								<view class="cardPrice">{{item.money}}元</view>
								<view class="cardName">{{item.name}}</view>
								<view class="cardTime">到期时间：{{item.expirationTime.slice(0,10)}}</view>
								<image v-if="current==1" class="yishixiaoIcon" src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/ebe9f2ce1b002c30ca569cfaeeed48a.png" mode="aspectFill"></image>
							</view>
							<view style="height:100rpx"></view>
						</view>
						<u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" >
						</u-empty>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
		<view class="addBox">
			<view class="addBtn" @click="addCard()">
				<image class="addIcon" src="@/static/my/addcardIcon.png" mode="aspectFit"></image>
				<view class="btnText">
					添加新卡
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/header/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				cardList:[],
				tabList: [{
					name: '可使用'
				}, {
					name: '已过期'
				}],
				current:0,
				navBarHeight: 0,
			}
		},
		created(){
			this.setNavBarHeight()
			this.getCardList()
		},
		methods: {
			async setNavBarHeight() {
				let that = this
				console.log(1)
				wx.getStorage({
					key: 'navBarHeight',
			
					success(res) {
						// 换算为rpx单位 
						that.navBarHeight = res.data * 2 + 317 + 'rpx'
					}
				})
			
			},
			changeTabs(e) {
				this.current = e.index
			},
			currentChange(e) {
				this.current = e.detail.current
				this.cardList=[]
				if (this.current == 0) {
					this.getCardList()
				} else {
					this.getCardList2()
				}
				
			},
			addCard(){
				uni.navigateTo({
					url:'/pages/card/addCard/addCard'
				})
			},
			//可使用礼品卡
			async getCardList() {
				let res = await this.$api.request('manage/card/client/list', 'get', {
					pageSize: 99,
					pageNum:1
				})
				this.cardList = res.data.list
				
			},
			//已过期礼品卡
			async getCardList2() {
				let res = await this.$api.request('manage/card/client/myExpirationList', 'get', {
					pageSize: 99,
					pageNum:1
				})
				this.cardList = res.data.list
			},
			goDetails(val){
				uni.navigateTo({
					url:'/pages/card/cardDetails?item='+encodeURIComponent(JSON.stringify(val))
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox{
		width: 100vw;
		height: 100vh;
	}
	.addBox{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		border: 2rpx solid #F5F5F5;
		box-shadow: 0rpx 9rpx 11rpx 3rpx rgba(211,214,217,0.36);
		display: flex;
		align-items: center;
		justify-content: center;
		.addBtn{
			display: flex;
			align-items: center;
			.addIcon{
				width: 41rpx;
				height: 34rpx;
				margin-right: 29rpx;
			}
			.btnText{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
	}
	.main{
		.bgBox{
			height: 205.9rpx;
			width: 750rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 15rpx;
			z-index: 0;
			.bgPic{
				position: absolute;
				z-index: 100;
				height: 205.9rpx;
				width: 750rpx;
			}
			.title{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				position: relative;
				z-index: 500;
			}
		}
		.tabBox {
			width: 100%;

			padding: 0 175rpx;
			box-sizing: border-box;

		}
		.content{
			height: 100%;
			width: 100%;
			box-sizing: border-box;
			.swiper{
				width: 100%;
				box-sizing: border-box;
	
				
				.swiperItem{

					overflow: scroll;
				}
			}
		}
		.list{
			padding: 35rpx 40rpx 0;
			width: 100%;
			box-sizing: border-box;
			.cardItem {
				width: 100%;
				height: 384rpx;
				margin-bottom: 20rpx;
				border-radius: 21rpx;
				position: relative;
				&.loseEfficacy{
					opacity: 0.7;
				}
				.yishixiaoIcon{
					position: absolute;
					right:20%;
					top:50%;
					width: 180rpx;
					height:180rpx;
					transform: translateY(-50%);
				}
			
				.cardBg {
					position: absolute;
					width: 100%;
					height: 384rpx;
					border-radius: 20rpx;
				}
				.cardTime{
					position: absolute;
					right: 25rpx;
					bottom: 30rpx;
					font-size: 28rpx;
					color:#fafafa;
				}
			
				.logo {
					position: absolute;
					width: 74rpx;
					height: 88rpx;
					top: 8rpx;
					left: 36rpx;
					box-shadow: 0rpx 10rpx 17rpx 0rpx rgba(122, 122, 122, 0.08);
				}
			
				.cardPrice {
					position: absolute;
					top: 160rpx;
					left: 114rpx;
					font-size: 70rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					-webkit-text-stroke: 1px #D42A1B;
					text-stroke: 1px #D42A1B;
				}
			
				.cardName {
					position: absolute;
					bottom: 30rpx;
					left: 30rpx;
					width: 177rpx;
					height: 57rpx;
					background: rgba(255, 255, 255, 0.87);
					border-radius: 24rpx;
					text-align: center;
					line-height: 57rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #D42A1B;
			
				}
			}
			// .Item{
			// 	width: 710rpx;
			// 	height: 391rpx;
			// 	border-radius: 10rpx;
			// 	position: relative;
			// 	overflow: hidden;
			// 	margin-bottom: 29rpx;
			// 	.expirationTime{
			// 		position: absolute;
			// 		right:25rpx;
			// 		top:25rpx;
			// 		font-size: 36rpx;
			// 		font-family: PingFang SC;
			// 		font-weight: 400;
			// 		color: #333;
			// 	}
			// 	.cardPic{
			// 		width: 710rpx;
			// 		height: 391rpx;
			// 		border-radius: 10rpx;
			// 		position: absolute;
			// 	}
			// 	.cardBottom{
			// 		position: absolute;
			// 		bottom: 0;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		padding: 0 20rpx;
			// 		box-sizing: border-box;
			// 		width: 710rpx;
			// 		height: 91rpx;
			// 		background: linear-gradient(-49deg, #E86932, #DD3B26);
			// 		border-radius: 0rpx 0rpx 10rpx 10rpx;
			// 		.num{
			// 			font-size: 36rpx;
			// 			font-family: PingFang SC;
			// 			font-weight: 400;
			// 			color: #FFFFFF;
			// 		}
			// 		.price{
			// 			font-size: 36rpx;
			// 			font-family: PingFang SC;
			// 			font-weight: 400;
			// 			color: #FFFFFF;
			// 		}
			// 	}
			// }
		}
	}
	
</style>
